<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  created () {
    this.setFontSize()
    this.setVertical()
  },
  methods: {
    setFontSize () {
      // 设计稿宽,以iPhone7的750px为准
      var designW = 750
      var fontRate = 100
      // 适配
      document.getElementsByTagName('html')[0].style.fontSize = document.body.offsetWidth / designW * fontRate + 'px'
      document.getElementsByTagName('body')[0].style.fontSize = document.body.offsetWidth / designW * fontRate + 'px'
      // 监测窗口大小变化
      window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', function () {
        document.getElementsByTagName('html')[0].style.fontSize = document.body.offsetWidth / designW * fontRate + 'px'
        document.getElementsByTagName('body')[0].style.fontSize = document.body.offsetWidth / designW * fontRate + 'px'
      }, false)
    },
    setVertical (config) {
      let color = config && config.color ? config.color : '#000'
      let txt = config && config.txt ? config.txt : '为了更好的体验，请使用竖屏浏览'
      let images = config && config.images ? config.images : ''
      let div = document.createElement('div')
      div.innerHTML = '<style type="text/css">@-webkit-keyframes rotation{10%{transform: rotate(90deg); -webkit-transform: rotate(90deg)} 50%, 60%{transform: rotate(0deg); -webkit-transform: rotate(0deg)} 90%{transform: rotate(90deg); -webkit-transform: rotate(90deg)} 100%{transform: rotate(90deg); -webkit-transform: rotate(90deg)} } @keyframes rotation{10%{transform: rotate(90deg); -webkit-transform: rotate(90deg)} 50%, 60%{transform: rotate(0deg); -webkit-transform: rotate(0deg)} 90%{transform: rotate(90deg); -webkit-transform: rotate(90deg)} 100%{transform: rotate(90deg); -webkit-transform: rotate(90deg)} } #orientLayer{display: none; z-index: 999999;} @media screen and (min-aspect-ratio: 1/1){#orientLayer{display: block;} } .mod-orient-layer{display: none; position: fixed; height: 100%; width: 100%; left: 0; top: 0; right: 0; bottom: 0; background: ' + color + '; z-index: 9997} .mod-orient-layer__content{position: absolute; width: 100%; top: 45%; margin-top: -75px; text-align: center} .mod-orient-layer__icon-orient{background-image: url(' + images + '); display: inline-block; width: 67px; height: 109px; transform: rotate(90deg); -webkit-transform: rotate(90deg); -webkit-animation: rotation infinite 1.5s ease-in-out; animation: rotation infinite 1.5s ease-in-out; -webkit-background-size: 67px; background-size: 67px} .mod-orient-layer__desc{margin-top: 20px; font-size: 15px; color: #fff}</style><div id="orientLayer" class="mod-orient-layer"> <div class="mod-orient-layer__content"> <i class="icon mod-orient-layer__icon-orient"></i> <div class="mod-orient-layer__desc">' + txt + '</div> </div></div>'
      document.getElementsByTagName('body')[0].appendChild(div)
    }
  }
}
</script>

<style>
#app {
  width: 100%;
  height: 100%;
}
</style>
